<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户权限管理系统 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }
        .dashboard-header {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: white;
            padding: 60px 0;
            margin-bottom: 30px;
        }
        .dashboard-card {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
        }
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
        .dashboard-card-icon {
            font-size: 32px;
            color: #ffffff;
            padding: 20px;
        }
        .stat-card {
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .stat-value {
            font-size: 2.5rem;
            font-weight: 600;
        }
        .stat-label {
            color: #6c757d;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 30px 0;
            margin-top: 50px;
        }
        .card-body {
            padding: 0;
        }
        .card-content {
            padding: 20px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="javascript:location.reload()">用户权限管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="javascript:location.reload()">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/users'">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/roles'">角色管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/permissions'">权限管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 系统标题区域 -->
    <div class="dashboard-header">
        <div class="container">
            <h1 class="display-4 fw-bold">用户权限管理系统</h1>
            <p class="lead">管理用户、角色和权限</p>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container">
        <!-- 系统概览统计卡片 -->
        <div class="mb-5">
            <h2 class="mb-4">系统概览</h2>
            <div class="row">
                <div class="col-md-3 mb-4">
                    <div class="stat-card bg-primary text-white p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="text-white">用户总数</h5>
                            <span class="fa fa-users fa-2x"></span>
                        </div>
                        <div class="mt-3">
                            <span class="stat-value" id="userCount">--</span>
                            <div class="stat-label">系统用户</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="stat-card bg-secondary text-white p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="text-white">角色总数</h5>
                            <span class="fa fa-user-circle fa-2x"></span>
                        </div>
                        <div class="mt-3">
                            <span class="stat-value" id="roleCount">--</span>
                            <div class="stat-label">系统角色</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="stat-card bg-success text-white p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="text-white">权限总数</h5>
                            <span class="fa fa-lock fa-2x"></span>
                        </div>
                        <div class="mt-3">
                            <span class="stat-value" id="permissionCount">--</span>
                            <div class="stat-label">系统权限</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-4">
                    <div class="stat-card bg-info text-white p-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="text-white">页面访问次数</h5>
                            <span class="fa fa-eye fa-2x"></span>
                        </div>
                        <div class="mt-3">
                            <span class="stat-value" id="pageViewCount">--</span>
                            <div class="stat-label">页面访问次数</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能导航卡片 -->
        <div class="mb-5">
            <h2 class="mb-4">功能导航</h2>
            <div class="row">
                <!-- 用户管理卡片 -->
                <div class="col-md-4 mb-4">
                    <div class="dashboard-card h-100">
                        <div class="d-flex">
                            <div class="bg-primary dashboard-card-icon">
                                <span class="fa fa-users"></span>
                            </div>
                            <div class="card-content flex-grow-1">
                                <h3 class="card-title">用户管理</h3>
                                <p class="card-text">管理系统用户，查看用户信息，设置用户角色。</p>
                                <a href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/users'" class="btn btn-primary">
                                    <i class="fa fa-arrow-right mr-2"></i>进入管理
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 角色管理卡片 -->
                <div class="col-md-4 mb-4">
                    <div class="dashboard-card h-100">
                        <div class="d-flex">
                            <div class="bg-secondary dashboard-card-icon">
                                <span class="fa fa-user-circle"></span>
                            </div>
                            <div class="card-content flex-grow-1">
                                <h3 class="card-title">角色管理</h3>
                                <p class="card-text">查看系统中的所有角色及其拥有的权限信息。</p>
                                <a href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/roles'" class="btn btn-secondary">
                                    <i class="fa fa-arrow-right mr-2"></i>进入管理
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 权限管理卡片 -->
                <div class="col-md-4 mb-4">
                    <div class="dashboard-card h-100">
                        <div class="d-flex">
                            <div class="bg-success dashboard-card-icon">
                                <span class="fa fa-lock"></span>
                            </div>
                            <div class="card-content flex-grow-1">
                                <h3 class="card-title">权限管理</h3>
                                <p class="card-text">查看系统中的所有权限，了解各模块的功能授权。</p>
                                <a href="javascript:window.location.href = '/' + window.location.pathname.split('/')[1] + '/permissions'" class="btn btn-success">
                                    <i class="fa fa-arrow-right mr-2"></i>进入管理
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统信息卡片 -->
        <div class="bg-light p-4 rounded-lg mb-5">
            <h2 class="text-center mb-4">系统信息</h2>
            <p class="text-center">用户权限管理系统是一个简化的系统，可设置用户角色，查看角色权限。</p>
            <div class="row justify-content-center mt-3">
                <div class="col-md-3 text-center">
                    <h5>核心功能</h5>
                    <p>用户-角色-权限管理</p>
                </div>
                <div class="col-md-3 text-center">
                    <h5>技术框架</h5>
                    <p>Spring Boot + Bootstrap</p>
                </div>
                <div class="col-md-3 text-center">
                    <h5>数据库</h5>
                    <p>MySQL + Redis</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="text-center">
                <p class="mb-0">用户权限管理系统 &copy; 2025</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载后获取系统统计数据
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，开始获取数据...');
            
            // 直接使用硬编码的URL进行测试
            const baseUrl = '/permission-system';
            
            console.log('Base URL:', baseUrl);
            console.log('Full URL:', window.location.origin + baseUrl);
            
            // 获取用户数量
            console.log('开始获取用户数据...');
            fetch(window.location.origin + baseUrl + '/api/users')
                .then(response => {
                    console.log('用户API响应状态:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('用户数据:', data);
                    if (data.code === 200 && data.data) {
                        // 处理不同的数据格式
                        let userCount = 0;
                        if (Array.isArray(data.data)) {
                            userCount = data.data.length;
                        } else if (data.data.list && Array.isArray(data.data.list)) {
                            userCount = data.data.list.length;
                        } else if (data.data.records && Array.isArray(data.data.records)) {
                            userCount = data.data.records.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            // 处理嵌套对象格式
                            userCount = Object.keys(data.data).length;
                        }
                        document.getElementById('userCount').textContent = userCount;
                        console.log('用户数量:', userCount);
                    } else if (data.success === true && data.data) {
                        // 处理另一种可能的响应格式
                        let userCount = 0;
                        if (Array.isArray(data.data)) {
                            userCount = data.data.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            userCount = Object.keys(data.data).length;
                        }
                        document.getElementById('userCount').textContent = userCount;
                        console.log('用户数量:', userCount);
                    } else {
                        console.error('用户数据格式错误:', data);
                        document.getElementById('userCount').textContent = '0';
                    }
                })
                .catch(error => {
                    console.error('获取用户数据失败:', error);
                    document.getElementById('userCount').textContent = '0';
                });
            
            // 获取角色数量
            console.log('开始获取角色数据...');
            fetch(window.location.origin + baseUrl + '/api/roles')
                .then(response => {
                    console.log('角色API响应状态:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('角色数据:', data);
                    if (data.code === 200 && data.data) {
                        // 处理不同的数据格式
                        let roleCount = 0;
                        if (Array.isArray(data.data)) {
                            roleCount = data.data.length;
                        } else if (data.data.list && Array.isArray(data.data.list)) {
                            roleCount = data.data.list.length;
                        } else if (data.data.records && Array.isArray(data.data.records)) {
                            roleCount = data.data.records.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            // 处理嵌套对象格式
                            roleCount = Object.keys(data.data).length;
                        }
                        document.getElementById('roleCount').textContent = roleCount;
                        console.log('角色数量:', roleCount);
                    } else if (data.success === true && data.data) {
                        // 处理另一种可能的响应格式
                        let roleCount = 0;
                        if (Array.isArray(data.data)) {
                            roleCount = data.data.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            roleCount = Object.keys(data.data).length;
                        }
                        document.getElementById('roleCount').textContent = roleCount;
                        console.log('角色数量:', roleCount);
                    } else {
                        console.error('角色数据格式错误:', data);
                        document.getElementById('roleCount').textContent = '0';
                    }
                })
                .catch(error => {
                    console.error('获取角色数据失败:', error);
                    document.getElementById('roleCount').textContent = '0';
                });
            
            // 获取权限数量
            console.log('开始获取权限数据...');
            fetch(window.location.origin + baseUrl + '/api/permissions')
                .then(response => {
                    console.log('权限API响应状态:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('权限数据:', data);
                    if (data.code === 200 && data.data) {
                        // 处理不同的数据格式
                        let permissionCount = 0;
                        if (Array.isArray(data.data)) {
                            permissionCount = data.data.length;
                        } else if (data.data.list && Array.isArray(data.data.list)) {
                            permissionCount = data.data.list.length;
                        } else if (data.data.records && Array.isArray(data.data.records)) {
                            permissionCount = data.data.records.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            // 处理嵌套对象格式
                            permissionCount = Object.keys(data.data).length;
                        }
                        document.getElementById('permissionCount').textContent = permissionCount;
                        console.log('权限数量:', permissionCount);
                    } else if (data.success === true && data.data) {
                        // 处理另一种可能的响应格式
                        let permissionCount = 0;
                        if (Array.isArray(data.data)) {
                            permissionCount = data.data.length;
                        } else if (typeof data.data === 'object' && !Array.isArray(data.data)) {
                            permissionCount = Object.keys(data.data).length;
                        }
                        document.getElementById('permissionCount').textContent = permissionCount;
                        console.log('权限数量:', permissionCount);
                    } else {
                        console.error('权限数据格式错误:', data);
                        document.getElementById('permissionCount').textContent = '0';
                    }
                })
                .catch(error => {
                    console.error('获取权限数据失败:', error);
                    document.getElementById('permissionCount').textContent = '0';
                });
            
            // 获取页面访问次数
            console.log('开始获取页面访问数据...');
            fetch(window.location.origin + baseUrl + '/api/stats/page-views')
                .then(response => {
                    console.log('页面访问API响应状态:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('页面访问数据:', data);
                    if (data.code === 200 && data.data) {
                        // 处理不同的数据格式
                        let pageViewCount = 0;
                        if (typeof data.data === 'number') {
                            pageViewCount = data.data;
                        } else if (data.data.totalViews) {
                            pageViewCount = data.data.totalViews;
                        }
                        document.getElementById('pageViewCount').textContent = pageViewCount;
                        console.log('页面访问次数:', pageViewCount);
                    } else if (data.success === true && data.data) {
                        // 处理另一种可能的响应格式
                        let pageViewCount = 0;
                        if (typeof data.data === 'number') {
                            pageViewCount = data.data;
                        } else if (data.data.totalViews) {
                            pageViewCount = data.data.totalViews;
                        }
                        document.getElementById('pageViewCount').textContent = pageViewCount;
                        console.log('页面访问次数:', pageViewCount);
                    } else {
                        console.error('页面访问数据格式错误:', data);
                        document.getElementById('pageViewCount').textContent = '0';
                    }
                })
                .catch(error => {
                    console.error('获取页面访问次数失败:', error);
                    document.getElementById('pageViewCount').textContent = '0';
                });
        });
    </script>
</body>
</html>